<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心动画</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            position: relative;
        }
        
        .message {
            position: absolute;
            z-index: 10;
            font-family: 'Arial', sans-serif;
            font-size: 5rem;
            font-weight: bold;
            color: rgba(173, 216, 230, 0.8);
            text-shadow: 0 0 20px rgba(173, 216, 230, 0.6);
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); opacity: 0.7; }
        }
        
        .heart {
            position: absolute;
            font-size: 24px;
            color: pink;
            animation: twinkle 3s infinite;
            user-select: none;
        }
        
        @keyframes twinkle {
            0% { opacity: 0.3; filter: blur(0); }
            50% { opacity: 1; filter: blur(1px); }
            100% { opacity: 0.3; filter: blur(0); }
        }
    </style>
</head>
<body>
    <div class="message">I LOVE U</div>
    
    <script>
        // 创建爱心元素
        function createHeart() {
            const heart = document.createElement('div');
            heart.classList.add('heart');
            heart.textContent = '❤';
            
            // 随机位置
            heart.style.left = Math.random() * 100 + 'vw';
            heart.style.top = Math.random() * 100 + 'vh';
            
            // 随机大小
            const size = Math.random() * 30 + 20;
            heart.style.fontSize = size + 'px';
            
            // 随机动画持续时间
            const duration = Math.random() * 4 + 1;
            heart.style.animationDuration = duration + 's';
            
            // 随机颜色（粉色的不同深浅）
            const hue = Math.random() * 20 + 340; // 粉色范围
            const saturation = Math.random() * 20 + 80;
            const lightness = Math.random() * 20 + 70;
            const color = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
            heart.style.color = color;
            
            // 随机透明度
            heart.style.opacity = Math.random() * 0.5 + 0.5;
            
            // 随机旋转
            const rotate = Math.random() * 40 - 20;
            heart.style.transform = `rotate(${rotate}deg)`;
            
            // 添加闪烁效果
            heart.style.textShadow = `0 0 ${Math.random() * 10 + 5}px ${color}`;
            
            document.body.appendChild(heart);
            
            // 一段时间后移除心形
            setTimeout(() => {
                heart.remove();
            }, duration * 1000);
        }
        
        // 定期创建爱心
        function generateHearts() {
            const numberOfHearts = Math.floor(window.innerWidth / 30); // 基于屏幕宽度确定爱心数量
            
            for (let i = 0; i < numberOfHearts; i++) {
                setTimeout(createHeart, i * 100);
            }
        }
        
        // 每隔一段时间生成一批爱心
        setInterval(generateHearts, 2000);
        
        // 页面加载立即生成爱心
        generateHearts();
    </script>
</body>
</html>